<template>
    <div id="school">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="common-bread">
            <el-breadcrumb-item>学校管理</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div class="select">
                <label class="label">学校类型：</label>
                <el-select v-model="type">
                    <el-option label='全部' value='0'></el-option>
                    <el-option label='小学' value='1'></el-option>
                    <el-option label='初中' value='2'></el-option>
                    <el-option label='高中' value='3'></el-option>
                </el-select>
                <label class="label">省市：</label>
                <el-select v-model="cityId" @change="getZones()">
                    <el-option :label='item.areaName' :value='item.areaId' v-for="item in cities" :key="item.areaId"></el-option>
                </el-select>
                <label class="label">区县：</label>
                <el-select v-model="zoneId" @change="getSchools()">
                    <el-option :label='item.areaName' :value='item.areaId' v-for="item in zones" :key="item.areaId"></el-option>
                </el-select>
                <div class="mt10">
                    <label class="label">学校名称：</label>
                    <el-autocomplete v-model="schoolName" :fetch-suggestions="querySearch" placeholder="请输入学校名称"
                        clearable></el-autocomplete>
                    <el-button type="primary" @click="getList(1)">搜索</el-button>
                    <el-button type="primary" @click="$router.push('/newSchool')" class="fr" icon="el-icon-circle-plus-outline">添加学校</el-button>
                </div>
            </div>

            <div class="list">
                <el-table :data="list">
                    <el-table-column type="index" label="序号">
                    </el-table-column>
                    <el-table-column prop="schoolCode" label="学校编号">
                    </el-table-column>
                    <el-table-column prop="name" label="学校名称">
                    </el-table-column>
                    <el-table-column prop="zone" label="地区">
                    </el-table-column>
                    <el-table-column prop="schoolType" label="类型">
                    </el-table-column>
                    <el-table-column prop="tags" label="标签">
                    </el-table-column>
                    <el-table-column prop="classCount" label="班级数量" width="90px">
                    </el-table-column>
                    <el-table-column prop="teacherCount" label="教师数量" width="90px">
                    </el-table-column>
                    <el-table-column prop="studentCount" label="学生数量" width="90px">
                    </el-table-column>
                    <el-table-column label="操作" width="150px">
                        <template slot-scope="scope">
                            <i class="el-icon-document blueIcon" @click="toDet(scope.row)" title="查看详情"></i>
                            <i class="el-icon-edit blueIcon" @click="newSch(scope.row)" title="编辑"></i>
                            <i class="el-icon-delete redIcon" @click="deleteSchool(scope.row)" title="删除" v-if="!scope.row.classCount && !scope.row.teacherCount"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination v-show="this.totalCount > 10" layout="total, prev, pager, next, jumper" :page-size="10"
                        :current-page="currentPage" :total="totalCount" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                type: "0",
                cityId: "00000000",
                zoneId: "00000000",
                cities: [],
                zones: [{
                    areaId: "00000000",
                    areaName: "全部"
                }],
                schoolName: "",
                schools: [],
                list: [],
                totalCount: 0,
                currentPage: 1
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.getCities();
            this.getSchools().then(schools => {
                let schSelect = this.$util.getStore("schSelect");
                let schInfo = JSON.parse(this.$util.getStore("schInfo"));

                if (schSelect == 1 && schInfo) {
                    this.currentPage = schInfo.pageNum * 1;
                    this.schoolName = schInfo.name;
                    if (!schInfo.isPrimary && !schInfo.isHigh && !schInfo.isMiddle) this.type = "0";
                    if (schInfo.isPrimary) this.type = "1";
                    if (schInfo.isMiddle) this.type = "2";
                    if (schInfo.isHigh) this.type = "3";
                    if (schInfo.areaId == "00000000") {
                        this.cityId = "00000000";
                        this.zoneId = "00000000";
                    } else if (schInfo.areaId.substring(2, 8) == "000000") {
                        this.cityId = schInfo.areaId;
                        this.getZones();
                    } else {
                        this.cityId = schInfo.areaId.substring(0, 2) + "000000";
                        this.getZones(schInfo.areaId);
                    }
                }

                this.getList(this.currentPage);
                this.$util.removeStore("schSelect");
                this.$util.removeStore("schInfo");
            });
        },
        methods: {
            getSchools() {
                return new Promise((resolve, reject) => {
                    let areaId = this.zoneId == "00000000" ? this.cityId : this.zoneId;
                    this.$util.getSchools(areaId).then(schools => {
                        this.schools = [];
                        this.schoolId = "";
                        this.schoolName = "";
                        schools.forEach(item => {
                            this.schools.push({
                                value: item.name, schoolId: item.schoolId
                            })
                        });

                        resolve(schools);
                    })
                })
            },
            createFilter(queryString) {
                return (school) => {
                    return (school.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
                };
            },
            querySearch(queryString, cb) {
                let schools = this.schools;
                let results = queryString ? schools.filter(this.createFilter(queryString)) : schools;
                // 调用 callback 返回建议列表的数据
                cb(results);
                results = [];
            },
            //获取城市列表
            getCities() {
                this.$util.getCities().then(cities => {
                    this.cities = cities;
                    this.cities.unshift({
                        areaId: "00000000",
                        areaName: "全部"
                    });
                })
            },
            //获取区县列表
            getZones(zoneId = "00000000") {
                this.$util.getZones(this.cityId).then(zones => {
                    this.zones = this.cityId == "00000000" ? [] : zones;
                    this.zones.unshift({
                        areaId: "00000000",
                        areaName: "全部"
                    });
                    this.zoneId = zoneId;

                    this.getSchools();
                })
            },
            //获取学校列表
            getList(pageNum) {
                if (pageNum != this.currentPage) this.currentPage = pageNum;
                let areaId = this.zoneId == "00000000" ? this.cityId : this.zoneId;
                let params = {
                    areaId: areaId,
                    pageSize: 10,
                    pageNum: pageNum
                }

                if (this.schoolName) params.name = this.schoolName;
                if (this.type == 1) {
                    params.isPrimary = true;
                } else if (this.type == 2) {
                    params.isMiddle = true;
                } else if (this.type == 3) {
                    params.isHigh = true;
                }

                this.$axios.get("/adminapi/v1/tools/schools/list", {
                    params: params
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.list = [];
                        this.totalCount = 0;
                        if (!response.data.data) return;

                        this.$util.setStore("schInfo", params);

                        let list = response.data.data.content;
                        this.totalCount = response.data.data.total * 1;
                        list.forEach(item => {

                            item.schoolType = [];
                            if (item.haveHigh) {
                                item.schoolType.push("高中");
                            }
                            if (item.havePrimary) {
                                item.schoolType.push("小学");
                            }
                            if (item.haveMiddle) {
                                item.schoolType.push("初中");
                            }
                            if (item.areaModelList) {
                                item.zone = "";
                                item.areaModelList.forEach(op => {
                                    item.zone += op.areaName;
                                })
                            }
                            item.schoolType = item.schoolType.join("、");
                            item.tags = item.tags.replace(/-/g, "、");
                        });
                        this.list = list;

                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                }).catch(response => {
                    this.$util.errorMsg(response.data.message);
                })
            },
            deleteSchool(row) {
                this.$confirm(`删除后无法恢复，确认要删除吗？`, "温馨提示", this.$util.confirmBtnText).then(() => {
                    this.$axios.post("/adminapi/v1/tools/schools/delete?schoolId=" + row.schoolId).then(response => {
                        if (response.data.error == 10000) {
                            this.schools.forEach((item, index) => {
                                if (item.schoolId == row.schoolId) {
                                    this.schools.splice(index, 1);
                                }
                            })
                            this.getList(this.currentPage);
                            this.$util.successMsg("删除成功");
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    })
                }).catch(() => { })
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList(val);
            },
            newSch(row) {
                this.$router.push('/newSchool?id=' + row.schoolId);
                this.saveSelectHistory();
            },
            toDet(row) {
                this.$router.push('/schoolDet?id=' + row.schoolId);
                this.saveSelectHistory();
            },
            saveSelectHistory() {

                let areaId = this.zoneId == "00000000" ? this.cityId : this.zoneId;
                let params = {
                    areaId: areaId,
                    pageSize: 10,
                    pageNum: this.currentPage
                }

                if (this.schoolName) params.name = this.schoolName;
                if (this.type == 1) {
                    params.isPrimary = true;
                } else if (this.type == 2) {
                    params.isMiddle = true;
                } else if (this.type == 3) {
                    params.isHigh = true;
                }

                this.$util.setStore("schInfo", JSON.stringify(params));
            }
        }
    }
</script>
<style scoped>
</style>